CSS Gridi rea kordusfunktsioon: dünaamiline rea genereerimine

CSS Grid on muutnud veebikujunduse, pakkudes enneolematut kontrolli ja paindlikkust. Selle võimsate funktsioonide seas paistab repeat() funktsioon silma kui oluline tööriist dünaamiliste ja responsiivsete gridi struktuuride loomiseks. See funktsioon võimaldab teil tõhusalt määratleda korduvaid gridi ridade mustreid, lihtsustades oluliselt teie CSS-i ja muutes teie kujundused paremini kohandatavaks erinevatele ekraanisuurustele ja sisumahtudele. See põhjalik juhend uurib repeat() funktsiooni üksikasjalikult, hõlmates selle süntaksit, kasutusjuhtumeid ja täiustatud tehnikaid.

CSS Gridi põhitõdede mõistmine

Enne repeat() funktsiooni sukeldumist vaatame lühidalt üle CSS Gridi põhimõisted. CSS Gridi paigutus koosneb järgmistest elementidest:

• Grivi konteiner: vanemelement, millele gridi paigutus on rakendatud (display: grid; või display: inline-grid;).
• Grivi elemendid: gridi konteineri otsesed lapsed, mis paigutatakse automaatselt gridi.
• Grivi read: read ja veerud, mis moodustavad gridi.
• Grivi jooned: horisontaalsed ja vertikaalsed jooned, mis määratlevad gridi ridade piirid.
• Grivi lahtrid: üksikud ühikud gridis, mis on moodustatud gridi ridade ja veergude ristumiskohas.
• Grivi alad: üks või mitu gridi lahtrit, millele saab nime anda ja mida saab kasutada gridi elementide positsioneerimiseks.

Omadused grid-template-columns ja grid-template-rows määratlevad gridi ridade suuruse ja arvu. Näiteks:

            .grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
}

            

              
                Copy
              
            
          

See kood loob gridi, millel on kolm võrdse laiusega veergu (kasutades fr ühikut, mis tähistab osa saadaolevast ruumist) ja kaks rida automaatselt määratud kõrgustega.

Tutvustame repeat() funktsiooni

Funktsioon repeat() on lühend gridi ridade korduva mustri määratlemiseks. See võtab kaks argumenti:

1. Korduste arv: mitu korda rea muster peaks korduma. See võib olla fikseeritud arv või märksõnad nagu auto-fit ja auto-fill.
2. Rea loend: tühikuga eraldatud ridade suuruste loend, mis võib sisaldada mis tahes kehtivat CSS-i ühikut (nt px, em, fr, auto).

Põhisüntaks on:

            repeat( <number-of-repetitions> , <track-list> );
            

              
                Copy
              
            
          

Näiteks loob järgmine kood gridi nelja veeruga, igaüks 100 pikslit lai:

            .grid-container {
  display: grid;
  grid-template-columns: repeat(4, 100px);
}

            

              
                Copy
              
            
          

See on samaväärne järgmisega:

            .grid-container {
  display: grid;
  grid-template-columns: 100px 100px 100px 100px;
}

            

              
                Copy
              
            
          

Funktsioon repeat() muutub eriti väärtuslikuks, kui tegemist on keerukamate mustritega või kui teil on vaja dünaamiliselt kohandada ridade arvu vastavalt ekraani suurusele või sisule.

repeat() kasutamise põhinäited

Uurime mõningaid põhinäiteid, et illustreerida funktsiooni repeat() mitmekülgsust.

Võrdsed veerud

Konkreetse arvu võrdse laiusega veergude loomiseks saate kasutada fr ühikut:

            .grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

            

              
                Copy
              
            
          

See loob kolm veergu, millest igaüks võtab enda alla ühe kolmandiku saadaolevast ruumist.

Vahelduvad veergude suurused

Saate määratleda ka korduvaid mustreid erinevate veergude suurustega:

            .grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr 2fr);
}

            

              
                Copy
              
            
          

See loob gridi nelja veeruga. Muster 1fr 2fr kordub kaks korda, mille tulemuseks on veerud laiustega 1fr, 2fr, 1fr ja 2fr vastavalt.

Fikseeritud ja paindlikud veerud

Saate kombineerida fikseeritud laiusega veerge paindlike veergudega, kasutades repeat():

            .grid-container {
  display: grid;
  grid-template-columns: 100px repeat(2, 1fr) 100px;
}

            

              
                Copy
              
            
          

See loob gridi nelja veeruga. Esimesed ja viimased veerud on fikseeritud 100 pikslit, samas kui kaks keskmist veergu jagavad ülejäänud ruumi võrdselt.

Täiustatud tehnikad koos auto-fit ja auto-fill

auto-fit ja auto-fill mõistmine

Nii auto-fit kui ka auto-fill eesmärk on täita saadaolev ruum võimalikult paljude ridadega. Peamine erinevus seisneb selles, kuidas nad tühjade ridadega toime tulevad:

• auto-fill: täidab rea võimalikult paljude veergudega. Kui on tühje veerge, sest gridi elemente pole piisavalt, jätab see ruumi selliseks, nagu see on. Brauser võib lisada lõppu tühje veerge. Need tühjad read võtavad ikkagi ruumi.
• auto-fit: käitub samamoodi nagu auto-fill, kuid kui kõik gridi elemendid on paigutatud, ahendab see tühjad read. See tähendab, et ülejäänud read laienevad, et täita saadaolev ruum.

Põhimõtteliselt ahendab auto-fit tühjad read 0 pikslini, samas kui auto-fill säilitab määratletud rea suuruse isegi siis, kui need on tühjad. Praktilised tagajärjed sõltuvad teie konkreetsetest paigutusnõuetest.

auto-fit kasutamine responsiivsete veergude jaoks

            .grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 20px;
}

            

              
                Copy
              
            
          

See kood loob gridi, mis automaatselt kohandab veergude arvu vastavalt saadaolevale ruumile. See toimib järgmiselt:

• auto-fit: käsib gridil paigutada võimalikult palju veerge.
• minmax(250px, 1fr): määratleb iga veeru minimaalse ja maksimaalse suuruse. Iga veerg on vähemalt 250 pikslit lai, kuid see võib laieneda, et täita saadaolev ruum (kuni 1fr).
• grid-gap: 20px: lisab gridi elementide vahele 20 piksli suuruse vahe.

Ekraani suuruse muutumisel kohandab grid automaatselt veergude arvu, et tagada, et iga veerg jääb vähemalt 250 pikslit laiaks. Kui ekraan on piisavalt lai, laienevad veerud, et täita saadaolev ruum. Kui ekraan on liiga kitsas, et mahutada isegi ühte veergu, siis sisu ületäitub.

Näide stsenaarium: kujutage ette pildigaleriid. Seda lähenemisviisi kasutades kohandab galerii responsiivselt rea kohta kuvatavate piltide arvu, pakkudes optimaalset vaatamiskogemust erinevates seadmetes.

auto-fill kasutamine dünaamilise sisu jaoks

            .grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 10px;
}

            

              
                Copy
              
            
          

Sel juhul loob grid võimalikult palju veerge, millest igaüks on vähemalt 200 pikslit lai. Kui kõigi veergude täitmiseks pole piisavalt gridi elemente, jäävad ülejäänud veerud tühjaks, säilitades üldise gridi struktuuri. Kuigi need on tühjad, hõivavad nad ikkagi määratletud laiuse minmax, mis on peamine erinevus auto-fit ja auto-fill vahel.

Näide stsenaarium: kaaluge juhtpaneeli, millel on fikseeritud arv kohatäite vidinaid. auto-fill kasutamine tagab, et juhtpaneel säilitab ühtlase paigutuse, isegi kui mõned vidinad on ajutiselt tühjad või pole saadaval.

auto-fit ja auto-fill vahel valimine

Valik auto-fit ja auto-fill vahel sõltub teie konkreetsetest disainieesmärkidest. Siin on kokkuvõte, mis aitab teil otsustada:

• Kasutage auto-fit, kui: soovite, et grid kohandaks automaatselt veergude arvu vastavalt saadaolevale sisule ja ekraani suurusele ning soovite, et tühjad read aheneksid. See sobib ideaalselt responsiivsete paigutuste jaoks, kus soovite maksimeerida saadaoleva ruumi kasutamist.
• Kasutage auto-fill, kui: soovite säilitada ühtlast gridi struktuuri, isegi kui on tühje ridu. See on kasulik paigutuste jaoks, kus te eeldate tulevikus rohkem sisu lisamist või kus soovite säilitada üldise gridi paigutuse, isegi kui mõned elemendid puuduvad.

repeat() kombineerimine teiste CSS Gridi omadustega

Funktsiooni repeat() saab kombineerida teiste CSS Gridi omadustega, et luua veelgi keerukamaid paigutusi. Siin on mõned näited:

grid-template-areas kasutamine koos repeat()

Kuigi repeat() peamine kasutusala on grid-template-columns ja grid-template-rows sees, võib selle dünaamiline olemus kaudselt mõjutada grid-template-areas abil määratletud paigutusi. Näiteks kui veergude arv muutub dünaamiliselt koos repeat(auto-fit, ...), siis grid-template-areas määratletud elementide paigutus kohandub vastavalt.

            .grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-template-rows: auto;
  grid-template-areas:
    "header header header"
    "nav main aside"
    "footer footer footer";
  gap: 10px;
}

.header { grid-area: header; background-color: #eee; }
.nav { grid-area: nav; background-color: #ddd; }
.main { grid-area: main; background-color: #ccc; }
.aside { grid-area: aside; background-color: #bbb; }
.footer { grid-area: footer; background-color: #aaa; }

            

              
                Copy
              
            
          

Selles näites, kuigi grid-template-columns kohandub dünaamiliselt vastavalt ekraani suurusele, jääb grid-template-areas (header, nav, main, aside, footer) määratletud põhipaigutuse struktuur ühtlaseks. Alad nav, main ja aside kohandavad oma laiust automaatselt veergude arvu muutumisel.

minmax() kasutamine repeat() sees paindlike ridade jaoks

Funktsioon minmax() võimaldab teil määratleda gridi rea minimaalse ja maksimaalse suuruse. See on eriti kasulik koos repeat(), et luua paindlikke ja responsiivseid paigutusi. Me kasutasime seda juba eelmistes näidetes.

            .grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

            

              
                Copy
              
            
          

See kood loob gridi veergudega, mis on vähemalt 200 pikslit laiad, kuid võivad laieneda, et täita saadaolev ruum. See tagab, et sisu jääb väiksematel ekraanidel loetavaks, kasutades samal ajal suurematel ekraanidel saadaolevat ruumi.

repeat() kombineerimine meediapäringutega

Saate kasutada meediapäringuid, et kohandada veergude arvu või ridade suurusi vastavalt ekraani suurusele. See võimaldab teil luua paigutusi, mis on optimeeritud erinevate seadmete jaoks. Näiteks:

            .grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Vaikimisi väikeste ekraanide jaoks */
}

@media (min-width: 768px) {
  .grid-container {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Suuremad ekraanid */
  }
}

@media (min-width: 1200px) {
  .grid-container {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Veelgi suuremad ekraanid */
  }
}

            

              
                Copy
              
            
          

See kood määratleb erinevad veergude konfiguratsioonid väikeste, keskmiste ja suurte ekraanide jaoks. Väikestel ekraanidel on veerud vähemalt 150 pikslit laiad. Keskmistel ekraanidel on need vähemalt 250 pikslit laiad ja suurtel ekraanidel on need vähemalt 300 pikslit laiad.

Reaalsed kasutusjuhtumid ja näited

Funktsioon repeat() on võimas tööriist erinevate paigutuste loomiseks. Siin on mõned reaalsed kasutusjuhtumid ja näited:

Pildigalerii

Nagu varem näidatud, võib pildigalerii saada suurt kasu repeat(auto-fit, minmax(...)) kasutamisest. See võimaldab galeriil responsiivselt kohandada rea kohta kuvatavate piltide arvu, tagades ühtlase ja visuaalselt atraktiivse esitluse erinevates seadmetes.

Toote loend

E-kaubanduse veebisait saab kasutada repeat(), et luua dünaamiline toodete loendi grid. Rea kohta kuvatavate toodete arvu saab kohandada vastavalt ekraani suurusele, pakkudes optimaalset ostukogemust kasutajatele lauaarvutites, tahvelarvutites ja nutitelefonides.

Blogipostituse loend

Blogi saab kasutada repeat(), et luua paindlik paigutus blogipostituse eelvaadete kuvamiseks. Rea kohta kuvatavate postituste arvu saab kohandada vastavalt ekraani suurusele, tagades, et sisu on erinevates seadmetes hõlpsasti juurdepääsetav ja loetav.

Juhtpaneeli paigutus

Juhtpaneel saab kasutada repeat(), et luua dünaamiline paigutus vidinate kuvamiseks. Rea kohta kuvatavate vidinate arvu saab kohandada vastavalt ekraani suurusele, pakkudes optimaalset ülevaadet peamistest mõõdikutest ja andmetest.

repeat() funktsiooni kasutamise parimad tavad

Tagamaks, et kasutate repeat() funktsiooni tõhusalt, kaaluge järgmisi parimaid tavasid:

• Kasutage minmax() paindlike ridade jaoks: funktsioon minmax() võimaldab teil määratleda gridi rea minimaalse ja maksimaalse suuruse, pakkudes tasakaalu paindlikkuse ja kontrolli vahel.
• Kaaluge hoolikalt auto-fit ja auto-fill: valige sobiv märksõna vastavalt oma konkreetsetele paigutusnõuetele. auto-fit sobib ideaalselt responsiivsete paigutuste jaoks, kus soovite maksimeerida saadaoleva ruumi kasutamist, samas kui auto-fill on kasulik ühtlase gridi struktuuri säilitamiseks.
• Kasutage seadmespetsiifiliste kohanduste jaoks meediapäringuid: meediapäringud võimaldavad teil kohandada veergude arvu või ridade suurusi vastavalt ekraani suurusele, optimeerides paigutust erinevate seadmete jaoks.
• Testige oma paigutusi erinevates seadmetes: testige alati oma paigutusi erinevates seadmetes, et tagada nende reageerimisvõime ja visuaalne atraktiivsus.
• Pakkuge varundust vanematele brauseritele: Kuigi CSS Gridi toetatakse laialdaselt, ei pruugi mõned vanemad brauserid repeat() funktsiooni täielikult toetada. Kaaluge nende brauserite jaoks varunduslahenduse pakkumist, näiteks ujukite või muude paigutustehnikate kasutamist.

Juurdepääsetavuse kaalutlused

Kuigi CSS Grid keskendub peamiselt visuaalsele paigutusele, on äärmiselt oluline arvestada gridi paigutuste rakendamisel juurdepääsetavusega. Siin on mõned peamised punktid:

• Loogiline lähtekoodi järjestus: veenduge, et teie sisu lähtekoodi järjestus oleks mõistlik ka ilma CSS-ita. Ekraanilugejad ja kasutajad, kes keelavad CSS-i, sõltuvad HTML-i lähtekoodi järjestusest. Kasutage CSS Gridi elementide visuaalseks ümberkorraldamiseks, kuid ärge ohverdage loogilist lähtekoodi järjestust.
• Klaviatuuriga navigeerimine: veenduge, et klaviatuuriga navigeerimine toimiks ootuspäraselt. CSS Grid ise ei mõjuta klaviatuuriga navigeerimist, kuid keerukad paigutused võivad mõnikord tekitada navigeerimisprobleeme. Testige põhjalikult klahviga Tab.
• Semantiline HTML: kasutage semantilisi HTML-elemente asjakohaselt. Näiteks kasutage <nav> navigeerimismenüüde jaoks, <article> artiklite jaoks jne. See aitab ekraanilugejatel mõista teie sisu struktuuri ja eesmärki.
• Piisav kontrastsus: tagage piisav värvikontrastsus teksti ja taustavärvide vahel. See on eriti oluline madala nägemisega kasutajate jaoks.
• Responsiivne disain: responsiivne gridi paigutus, mis kohandub erinevate ekraanisuuruste ja suumitasemetega, parandab juurdepääsetavust erinevate vajadustega kasutajatele.

Levinud probleemide tõrkeotsing

CSS Gridi ja funktsiooniga repeat() töötades võite kohata mõningaid levinud probleeme. Siin on mõned tõrkeotsingu näpunäited:

• Grivi elemendid ei täida ruumi: kui teie gridi elemendid ei täida saadaolevat ruumi, kontrollige omadusi grid-template-columns ja grid-template-rows. Veenduge, et kasutate sobivaid ühikuid (nt fr, %, auto) ja et ridade suurused on õigesti määratletud.
• Veerud ei murdu õigesti: kui teie veerud ei murdu õigesti, kontrollige uuesti funktsiooni minmax() ja märksõnu auto-fit või auto-fill. Veenduge, et veeru minimaalne laius oleks sisu jaoks sobiv ja et grid saaks kohandada veergude arvu vastavalt saadaolevale ruumile.
• Vahed ei kuvata õigesti: kui teie vahed ei kuvata õigesti, veenduge, et kasutate gridi konteineril omadust grid-gap (või eraldi omadusi grid-column-gap ja grid-row-gap). Samuti kontrollige, kas on konflikte tekitavaid stiile, mis võivad vahede sätteid tühistada.
• Ootamatu paigutuse käitumine erinevates brauserites: Kuigi CSS Gridil on hea brauseritoetus, võib erinevates brauserites olla väikesi erinevusi gridi paigutuste renderdamisel. Testige oma paigutusi mitmes brauseris, et tuvastada ja lahendada kõik ühilduvusprobleemid.

Kokkuvõte

CSS Gridi repeat() funktsioon on võimas tööriist dünaamiliste ja responsiivsete veebipaigutuste loomiseks. Mõistes selle süntaksit ja võimalusi, saate oma CSS-i oluliselt lihtsustada ja luua paigutusi, mis kohanduvad erinevatele ekraanisuurustele ja sisumahtudele. Olenemata sellest, kas ehitate pildigaleriid, toote loendit või keerukat juhtpaneeli, aitab repeat() funktsioon teil luua paindlikke ja visuaalselt atraktiivseid paigutusi, mis parandavad kasutajakogemust.

Funktsiooni repeat() valdamine, eriti auto-fit ja auto-fill kasutamine, on kaasaegse veebiarenduse jaoks hädavajalik. See võimaldab teil luua paigutusi, mis pole mitte ainult visuaalselt atraktiivsed, vaid ka kohandatavad ja hooldatavad. Võtke omaks CSS Gridi ja repeat() funktsiooni jõud, et avada veebidisainis uusi võimalusi.

Täiendav õppimine ja ressursid

• MDN Veebidokumendid: https://developer.mozilla.org/en-US/docs/Web/CSS/repeat
• CSS-Tricks: https://css-tricks.com/almanac/functions/repeat/
• Grid by Example: https://gridbyexample.com/